<template>
  <div class="register">
    <header class="my-header">
      <comp-header>
        <template v-slot:ctitle
          >&nbsp;&nbsp;&nbsp;登录</template>
          <!-- <span class="fa fa-angle-left" @click="$router.go(-1)"></span> -->
        <template v-slot:cicon>
          <span class="fa fa-ellipsis-h"></span>
        </template>
      </comp-header>
    </header>
    <div class="reg-box">
      <div class="title">华支付</div>
      <div class="username">
        <input type="text" placeholder="请输入账号" v-model="username" />
      </div>
      <div class="userpassword">
        <input
          type="password"
          placeholder="请输入密码"
          v-model="userpassword"
        />
      </div>
      <div class="btn"><button @click="login">登录</button></div>
      <div><a href="#/register" style="color:#513EB2">快速注册</a></div>
    </div>
  </div>
</template>

<script>
import compHeader from "@/components/comp-header.vue";
export default {
  name: "Register",
  components: {
    compHeader: compHeader,
  },
  data() {
    return {
      username: "",
      userpassword: "",
      obj: {},
    };
  },
  methods: {
    login() {
      let loginpro = axios.get(
        "http://music.kele8.cn/login/cellphone/login/cellphone?phone=" +
          this.username +
          "&password=" +
          this.userpassword
      );
      loginpro
        .then((response) => {
          let res = response.data.account;
          res.name = "小明";
          this.obj = res;
          //   ses.setItem("data", response.data.token);
          //   this.$parent.$data.userTitle = res[index].usertitle;
          //   this.startHacking("登录成功！");, query: { loginobj: this.obj }
          this.$router.push({ path: "/home" });
        })
        .catch((reject) => {
          console.log("错误", reject);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100vh;
  background: url(../assets/online.png) no-repeat;
  background-size: (960px * (7/10)) (491px * (7/10));
  background-position: (-350px * (7/10)) (0px * (7/10));
  background-color: #01064a;
  .reg-box {
    width: 300px;
    height: 260px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 260px;
    background-color: #fff;
    .title {
      font-size: 30px;
      color: #513eb2;
      font-weight: bolder;
    }
    .username {
      margin-top: 30px;
    }
    div {
      box-sizing: border-box;
      height: 30px;
      width: 300px;
      font-size: 14px;
      margin: 20px auto;
      text-align: center;
      span {
        display: inline-block;
        width: 65px;
        text-align-last: justify;
      }
    }
    input {
      height: 30px;
      width: 200px;
      background-color: transparent;
      outline: none;
      margin-left: 10px;
      border: 1px solid #ccc;
      text-indent: 10px;
      border-radius: 5px;
    }
    button {
      font-size: 18px;
      letter-spacing: 20px;
      text-indent: 20px;
      width: 260px;
      height: 40px;
      border-radius: 20px;
      color: #fff;
      background-color: #513eb2;
    }
  }
}
</style>